<script setup>
import { ref  } from 'vue'
const props = defineProps({
  //总数量
  total: {
    type: Number,
    default: 1
  },
  //当前页码
  pageNo: {
    type: Number,
    default: 1
  },
  //初始化
  // pageNoinsatl:{
  //     type:Number,
  //     default:1
  // },
  //当前页数
  pageSize: {
    type: Number,
    default: 5
  },
  //选择分页条数
  pageSizes: {
    type: Array,
    default: () => [5, 10, 20, 30]
  },
  //布局
  layout: {
    type: String,
    default: 'sizes, prev, pager, next, jumper'
  },
  background: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['handleChange', 'update:pageNo', 'update:pageSize'])
const handleSizeChange = (val) => {

  //修改pageNo的值
  emit('update:pageSize', val)
  console.log(val, '变成10')


  // 初始化分页
  emit('pageNoinsatl')
  //调用请求
  emit('handleChange')
}
const handleCurrentChange = (val) => {

  //修改pageNo的值
  emit('update:pageNo', val)
  //调用请求
  emit('handleChange')
}
</script>

<template>
  <!-- 分页 -->
  <el-pagination v-model:current-page="props.pageNo" v-model:page-size="props.pageSize" :page-sizes="props.pageSizes"
    :background="props.background" :layout="props.layout" :total="props.total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>

<style scoped></style>